<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" type="text/css" href="../css/ProductDetail.css">
    
    <style type="text/css">
        
        * {
            font-family: PingFangSC-Regular;
            padding: 0px;
            margin: 0px;
        }
        
        .actionBar {
            width: 100%;
            display: flex;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #e6e6e6;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px;
            box-sizing: border-box;
            position: fixed;
            height: 43px;
            background-color: white;
        }
        
        .selectTitleStyle {
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: auto;
            text-align: center;
            color: #ff4891;
            font-size: 14px;
            border-bottom-style: solid;
            border-bottom-color: #ff4891;
            border-bottom-width: 3px;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .px12_26 {
            font-size: 12px;
            color: #262626;
            margin-right: 30px;
        }
        
        .productDetailItemStyle {
            margin-left: 15px;
            margin-right: 15px;
            padding-bottom: 12px;
            padding-top: 12px;
            font-size: 14px;
            color: #262626;
            border-bottom: solid;
            border-bottom-color: #e5e5e5;
            border-bottom-width: 1px;
        }
    
    </style>
    
    <script src="../js/productDetail.js" rel="script" type="text/javascript">
    
    </script>
</head>
<body>

<div class="actionBar">
    
    <img style="width: 22px;height: 22px;" src="../img/back.png">
    
    <span style="flex: auto"></span>
    
    <span class="selectTitleStyle" onclick="scrollToTitle()">
        
        商品详情
    
    </span>
    
    <span style="width: 10px">
    
    </span>
    
    <span class="selectTitleStyle" onclick="scrollToAnxin()">
        
        安心保障
    
    </span>
    <span style="flex: auto"></span>
    
    <img style="width: 22px;height: 22px;" src="../img/share.png">

</div>

<div style="overflow: scroll;padding-top: 43px;">
    
    <div id="productDetailTitle"
        style="display: flex;align-items: center;flex-direction:column;width: inherit;
        justify-content: center;padding: 20px;">
        
        <img src="../img/productImg.png" style="width: 255px;">
    
    </div>
    
    <div style="padding-left: 15px;padding-right: 15px;">
        
        <p style="font-size: 20px;color: #474245;">
            一手能掌握的水果红心肉哦
        </p>
        <p style="font-size: 16px;color: #474245;margin-top: 6px;">
            越南红肉mini火龙果300*1个
        
        </p>
        
        <p style="font-size: 12px;color: #F5A623;opacity: 0.5;">
            越南红肉mini火龙果300*1个
        </p>
        
        <p style="font-size: 12px;color: #FF4891;">
            安心会员价
            <span style="font-size: 10px">
                ¥
            </span>
            <span style="font-size: 14px;">
                9.9
            </span>
        </p>
        
        <p style="border-bottom: solid;border-bottom-color: #e6e6e6;border-bottom-width: 1px;margin-top: 15px;"></p>
        
        <div style="padding-top: 10px;padding-bottom: 10px;">
            
            <span style="flex:auto;font-size: 12px;float:left;color: #969696;margin-right: 20px;">
                说明
            </span>
            
            <ul style="display: flex;flex-wrap: wrap;padding-left: 15px;">
                
                <li class="px12_26">
                    已售2043份
                </li>
                <li class="px12_26">
                    已售2043份
                </li>
                <li class="px12_26">
                    已售2043份
                </li>
                <li class="px12_26">
                    已售2043份
                </li>
                <li class="px12_26">
                    已售2043份
                </li>
                <li class="px12_26">
                    已售2043份
                </li>
                <li class="px12_26">
                    已售2043份
                </li>
            
            </ul>
        
        </div>
        
        <p style="border-bottom: solid;border-bottom-color: #e6e6e6;border-bottom-width: 1px;"></p>
        
        <div id="productAnxin" style="padding-top: 10px;padding-bottom: 10px;display: flex;">
            
            <span style="font-size: 12px;float:left;color: #969696;">安心</span>
            
            <div style="padding-top: 0;flex: 1;padding-left: 15px;">
                
                <span style="color: #474245;display:block;font-size: 12px;">已检<span style="color: green">64</span>项农残未超标，符合每日优鲜品控标准</span>
                
                <div style="display: flex;justify-content: space-between;margin-top: 20px;">
                    
                    <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;">
                        
                        <p style="background-color: #d8d8d8;width: 40px;height: 40px"></p>
                        <p style="font-size: 12px;color: #474245;margin-top: 5px;">绿色食品</p>
                    </div>
                    <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;">
                        
                        <p style="background-color: #d8d8d8;width: 40px;height: 40px"></p>
                        <p style="font-size: 12px;color: #474245;margin-top: 5px;">绿色食品</p>
                    </div>
                    <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;">
                        
                        <p style="background-color: #d8d8d8;width: 40px;height: 40px"></p>
                        <p style="font-size: 12px;color: #474245;margin-top: 5px;">绿色食品</p>
                    </div>
                
                </div>
            </div>
            
            <p style="clear: both;"></p>
        
        </div>
    
    </div>
    
    <p style="height: 10px;background-color: #F5F5F5"></p>
    
    <div style="padding: 15px;display: flex">
        
        <img width="37" height="18" src="../img/icon_vip_card.png">
        
        <span style="flex: 1;margin-left: 5px;font-size: 14px;color: #474245;">开通会员卡购买商品获返现</span>
        
        <span style="font-size: 14px;color: #474245;">去开通</span>
    </div>
    
    <p style="height: 10px;background-color: #F5F5F5"></p>
    
    <div style="padding-left: 15px;padding-right: 15px;padding-top: 10px;padding-bottom: 10px;">
        
        <div
            style="background-color: rgba(255,72,145,0.06);border-radius: 6px;display: flex;align-items: center;padding: 10px;">
            
            <div style="background-color: white;display: flex;flex-direction:column;align-items: center;
            padding-left: 10px;padding-right: 10px;padding-top:5px;padding-bottom:10px;border-radius: 5px;">
                
                <p style="font-size: 12px;color: #FF4891;">点击分享</p>
                <p style="font-size: 16px;color: #FF4891;font-family: PingFangSC-Semibold;">得25元红包</p>
            
            </div>
            
            <span style="font-size: 14px;color: #ff4891;flex: 1;text-align: center">已经有18536人分享了该商品</span>
        
        </div>
    
    </div>
    
    <p style="height: 10px;background-color: #F5F5F5"></p>
    
    <div>
        
        <p style="text-align: center;font-size: 16px;color: #262626;border-bottom-width: 1px;
    border-bottom-color: #e5e5e5;border-bottom-style:solid;padding-top: 15px;padding-bottom: 15px;margin-left: 15px;margin-right: 15px;">
            商品详情</p>
        
        <p class="productDetailItemStyle">规格：2盒</p>
        
        <p class="productDetailItemStyle">重量：200g/盒</p>
        
        <p class="productDetailItemStyle">保质期：到货可立即使用</p>
        
        <div style="margin-left: 15px;margin-right: 15px;margin-top: 15px;">
            
            <img src="../img/image_product_detail_desc.png" style="width: 100%;">
        
        </div>
        
        <p class="productDetailItemStyle">昏睡的顽童/梦就像烈酒/做了就泪流成河/不做就难耐忧愁/几天以前你差一点就死了/这TM荒唐的人间干倒了你的希望/你想把一切的一切都找个地方给射了/在墙上
            床上
            姑娘的肚子上</p>
    
    </div>
    
    <p style="height: 10px;background-color: #F5F5F5"></p>

</div>

<div style="display: flex;height: 50px;position: fixed;bottom: 0px;width: 100%;background-color: white;">
    
    <div style="display: flex;flex: 1;text-align: center;flex-direction: column;align-items: center;padding-top: 10px;
        padding-bottom: 5px;font-size: 10px;color: #262626;">
        
        <img src="../img/ic_product_shopping_cart_logo.png" width="20px" height=20>
        ¥0
    </div>
    <div style="display: inline;flex: 1;text-align: center;text-align: center;font-size: 10px;color: #474245;
        align-self: center;border-left-style: solid;display: flex;align-items: center;flex-direction: column;
        border-left-width: 1px;border-left-color: #e6e6e6;">
        
        <img src="../img/icon_love.png">
        
        收藏
    </div>
    <div style="display: inline;flex: 3;text-align: center;align-self: center;background-color: #ff4891;
        font-size: 16px;color: white;line-height: 50px;
        height: 100%;">
        
        加入购物车
    
    </div>

</div>

</body>
</html>
